<template lang="pug">
.column-filter
  .screen(
      v-Clickoutside="handleClose"
      @click="handleOpen")
    span.screen-btn 列过滤器
      span.iconfont(:class="isShow ? 'icon-up' : 'icon-down'")
    transition(:name="openDirection ? 'el-zoom-in-bottom' : 'el-zoom-in-top'")
      .dropdown-content(
        :class="{'is-show-content':openDirection === 2}"
        v-show="isShow")
        //- 下拉数据
        ul
          li(
            v-for="item in tableFullList" ref="filterDropLi"
            :class="groupByArr.indexOf(item) >=0 ? 'groupByList_hover' : ''")
            el-checkbox.checkbox-item(v-model="currentNewFilter[item]"
              @change="changeListEvent(item)") {{columnsObject[item].label}}
  div
    //- 选择按钮
    ul.groupByList_ul
      li.groupByList_list(v-for="(items,index) in groupByList"
        :key="items.label"
        @mouseenter="enterGroupByButton(index)"
        @mouseleave="resetGroupBy"
        @click="changeFilterEvent(index)")
        el-button.groupByList_btn(:class="filterCheckNum === index ? 'filter-active' : ''") {{items.label}}
</template>

<script>
/*
  author: 林墁霓
  content: 可筛选表格的列的字段
  edit: 黄丰瑞
  editDate: 2018-03-03
  editContent: 因升级element2.0受影响, 所以修改了整体的样式
*/
import Clickoutside from '@/utils/clickoutside'

export default {
  name: 'column-filter',
  directives: {
    Clickoutside
  },
  props: {
    columnsObject: Object,
    tableList: {
      type: Array,
      default: () => []
    },
    tableFullList: {
      type: Array,
      default: () => []
    },
    columnGroupBy: {
      type: Array,
      default: () => []
    }, // 筛选的分组
    openDirection: Number /* 1:默认向下展开，2：向上展开 */
  },
  data () {
    let currentFilter = {}
    this.tableFullList.map(item => {
      currentFilter[item] = this.tableList.indexOf(item) !== -1
    })
    const groupByList = [{label: '全部', filter: this.tableFullList}, ...this.columnGroupBy]
    return {
      isShow: false,
      iconState: '',
      currentFilter: currentFilter,
      afterChangeList: [],
      filterCheckNum: -1,
      groupByList: groupByList,
      groupByArr: []
    }
  },
  computed: {
    currentNewFilter () {
      return this.currentFilter
    }
  },
  methods: {
    handleOpen () {
      this.isShow = !this.isShow
    },
    handleClose () {
      this.isShow = false
    },
    changeListEvent () {
      this.afterChangeList = []
      for (var key in this.currentNewFilter) {
        if (this.currentNewFilter[key] === true) {
          this.afterChangeList.push(key)
        }
      }
      this.$emit('grandSonEvent', this.afterChangeList)
    },
    enterGroupByButton (index) {
      this.groupByArr = this.groupByList[index].filter
    },
    resetGroupBy () {
      this.groupByArr = []
    },
    changeFilterEvent (index) {
      this.filterCheckNum = index
      const groupByItem = this.groupByList[index].filter
      this.tableFullList.map(res => {
        this.currentNewFilter[res] = groupByItem.indexOf(res) !== -1
      })
      this.$emit('grandSonEvent', groupByItem)
    }
  }
}
</script>

<style scoped lang="sass">
.column-filter
  width: 80%
  display: flex
.screen
  width: 200px
  height: 38px
  line-height: 38px
  border: 1px solid #d1dbe5
  border-radius: 5px
  background: #fff
  .screen-btn
    display: flex
    justify-content: space-around
  .is-show-content
    bottom: 40px
  .dropdown-content
    width: 200px
    position: absolute
    z-index: 11
    max-height: 274px
    overflow: auto
    border-radius: 2px
    box-shadow: 0px 3px 5px  #d1dbe5
    border: 1px solid #d1dbe5
    margin: 5px 0px
  ul
    position: relative
    background-color: #ffffff
    li:hover,
    .groupByList_hover
      background-color: #e4e8f1
    li
      height: 35px
      padding-left: 10px
      .checkbox-item
        width: 100%
        height: 100%
        line-height: 35px
        margin: 0
.groupByList_ul
  display: flex
  align-items: center
  flex-wrap: wrap
  padding: 0px 15px 2px
  .groupByList_btn
    margin-right: 10px
    font-size: 12px
  .groupByList_btn:hover,
  .groupByList_btn:after,
  .filter-active
    background: rgba(161, 213, 247, .2)
    border-color: #20a0ff
</style>
